<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div {
            position: absolute;
            left: 100px;
            width: 1000px;
            height: 600px;
            font-size: 20px;
        }

        .header {
            background-color: green;
            top: 10px;
        }

        .banner {
            background-color: blue;
            top: 620px;
        }

        .main {
            background-color: yellow;
            top: 1230px;
            height: 1400px;
        }

        .side {
            position: absolute;
            width: 30px;
            height: 50px;
            top: 720px;
            left: 1100px;
            background-color: pink;
        }

        .goback {
            font-size: 8px;
            display: none;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="side">
        <span class="goback">滚回顶部</span>
    </div>
    <div class="header">header</div>
    <div class="banner">banner</div>
    <div class="main">main</div>


    <script>
        var banner = document.querySelector('.banner');
        var side = document.querySelector('.side');
        var sideTop = side.offsetTop - banner.offsetTop;
        var goback = document.querySelector('.goback');
        var main = document.querySelector('.main');

        document.addEventListener('scroll', function () {
            if (window.pageYOffset > banner.offsetTop) {
                side.style.position = 'fixed';
                side.style.top = sideTop + 'px';
            } else {
                side.style.position = 'absolute';
                side.style.top = '720px';
            }
            if (window.pageYOffset > main.offsetTop) {
                goback.style.display = 'block';
            } else {
                goback.style.display = 'none';
            }
        })

        goback.addEventListener('click', function () {
            //瞬间移动
            // window.scroll(0, 0);
            //动画效果的移动
            animate(window, 0);
        })

        function animate(obj, target, callback) {
            //让每次点击只产生一个定时器，否则会产生越点越快的效果
            clearInterval(obj.timer);
            //将定时器封装成一个对象的属性(函数)，这样不会产生每个定时器都同名的情况，也不会每次都生成一个内存空间
            obj.timer = setInterval(function () {
                //步长值写到定时器里
                //把步长值转换成整数，不要出现小数问题
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    }
                }
                // obj.style.top = obj.offsetTop + step + 'px';
                window.scroll(0, window.pageYOffset + step);
            }, 30)
        }
    </script>
</body>

</html>